<template>
	<u-picker ref="addressPicker" :show="showChoose" mode="multiSelector" :columns="mulSelect" @cancel="colCancel"
		:keyName="'fullName'" @change="pickerChange" @confirm="colChange">
	</u-picker>
</template>

<script>
	import {
		getProvinceSelector
	} from '@/api/province.js'
	export default {
		props: {
			showChoose: {
				type: Boolean,
				default: false
			},
			// 只展示三级
			showLevel: {
				type: Number,
				default: 3
			}
		},
		data() {
			return {
				province: [], //省数组
				city: [], //市数组
				district: [], //区数组
				street: [], //街道数组
				mulSelect: [], //四级联动显示数组，该数组的值为[[province],[city],[district],[street]]
				provinceId: 0, //省的id
				cityId: 0, //市的id
				districtId: 0, //区的id
				isActive: false,
				address: ''
			}
		},
		created() {
			this.initData(-1);
		},
		methods: {
			// 初始化基础数据
			async initData(nodeId) {
				// 一级数据
				const provinceData = await getProvinceSelector(nodeId);
				this.province = provinceData.data.list;
				if (this.showLevel === 1) {
					// 初始化数据
					this.mulSelect = [
						this.province
					]
					return;
				}
				// 二级数据
				this.provinceId = this.province[0].id;
				const cityData = await getProvinceSelector(this.provinceId);
				this.city = cityData.data.list;
				if (this.showLevel === 2) {
					// 初始化数据
					this.mulSelect = [
						this.province,
						this.city
					]
					return;
				}
				// 三级数据
				this.cityId = this.city[0].id;
				const districtData = await getProvinceSelector(this.cityId);
				this.district = districtData.data.list;
				if (this.showLevel === 3) {
					// 初始化数据
					this.mulSelect = [
						this.province,
						this.city,
						this.district
					]
					return;
				}
				// 四级数据
				this.districtId = this.district[0].id;
				const streetData = await getProvinceSelector(this.districtId);
				this.street = streetData.data.list;
				// 初始化数据
				this.mulSelect = [
					this.province,
					this.city,
					this.district,
					this.street
				]
			},
			async pickerChange(e) {
				const {
					columnIndex,
					value,
					values, // values为当前变化列的数组内容
					index,
					// 微信小程序无法将picker实例传出来，只能通过ref操作
					picker = this.$refs.addressPicker
				} = e
				// 当第一列值发生变化时，变化第二列(后一列)对应的选项
				if (columnIndex === 0) {
					if (this.showLevel === 1) {
						return;
					}
					this.provinceId = value[0].id;
					// picker为选择器this实例，变化第二列对应的选项
					const cityData = await getProvinceSelector(this.provinceId);
					picker.setColumnValues(1, cityData.data.list);
					if (this.showLevel === 2) {
						return;
					}
					// 加载第三级
					this.cityId = cityData.data.list[0].id;
					const districtData = await getProvinceSelector(this.cityId);
					picker.setColumnValues(2, districtData.data.list);
					if (this.showLevel === 3) {
						return;
					}
					// 加载第四级
					this.districtId = districtData.data.list[0].id;
					const streetData = await getProvinceSelector(this.districtId);
					picker.setColumnValues(3, streetData.data.list);
				} else if (columnIndex === 1) {
					if (this.showLevel === 2) {
						return;
					}
					// 加载第三级
					this.cityId = value[1].id;
					const districtData = await getProvinceSelector(this.cityId);
					picker.setColumnValues(2, districtData.data.list);
					if (this.showLevel === 3) {
						return;
					}
					// 加载第四级
					this.districtId = districtData.data.list[0].id;
					const streetData = await getProvinceSelector(this.districtId);
					picker.setColumnValues(3, streetData.data.list);
				} else if (columnIndex === 2) {
					if (this.showLevel === 3) {
						return;
					}
					// 加载第四级
					this.districtId = value[2].id;
					const streetData = await getProvinceSelector(this.districtId);
					picker.setColumnValues(3, streetData.data.list);
				}
			},
			colCancel() {
				this.$emit("update:show-choose", false);
			},
			colChange(e) {
				const {
					indexs,
					value,
					values
				} = e
				// 必须选择4级，后修改为指定级别
				if (indexs.length !== this.showLevel) {
					uni.showToast({
						title: '请选择完整的市县地区',
						icon: 'error'
					});
					return;
				}
				//将字体颜色修改为黑色
				this.isActive = true;
				// 给表单复制
				this.$emit("confirm", value);
			}
		}
	}
</script>